<template>
  <div>
    <el-drawer
      :with-header="false"
      :visible.sync="showAttenceIndex"
      size="80%"
    >
      <div class="attendance-all-infomation">
        <!-- 表格内容 -->
        <p class="attendance-title">已发布考勤信息</p>
        <template>
          <el-table
            ref="attendanceTable"
            v-loading="loading"
            :data="attendances.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            stripe
            fit
            highlight-current-row
            class="attendance-all-info"
          >
            <el-table-column
              label="序号"
              type="index"
              min-width="10%"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="checkName"
              label="考勤名称"
              min-width="12%"
            />

            <el-table-column
              align="center"
              prop="checkStatus"
              label="发布状态"
              min-width="8%"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.checkStatus===2" type="info">未发布</el-tag>
                <el-tag v-else-if="scope.row.checkStatus===1" type="success">发布中</el-tag>
                <el-tag v-else type="danger">错误</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="checkPosition"
              label="签到位置"
              min-width="20%"
            />
            <el-table-column
              align="center"
              prop="checkStartTime"
              label="签到开始时间"
              min-width="18%"
            />
            <el-table-column
              align="center"
              prop="checkStopTime"
              label="签到结束时间"
              min-width="18%"
            />
            <el-table-column
              align="center"
              prop="attendStatus"
              label="签到状态"
              min-width="8%"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.checkStatus===2" type="danger">未发布</el-tag>
                <el-tag v-else-if="scope.row.attendStatus===0">未开始</el-tag>
                <el-tag v-else-if="scope.row.attendStatus===1" type="success">签到中</el-tag>
                <el-tag v-else-if="scope.row.attendStatus===2" type="info">已结束</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="详情"
              min-width="20%"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="showAttendanceInfo(scope.row)">详情</el-button>
                <el-button v-if="scope.row.checkStatus===1&&scope.row.attendStatus!==0" type="text"><p style="color:#67C23A" @click="showAttendanceMessage(scope.row.checkId,scope.row.attendStatus)">签到名单</p></el-button>
                <el-button type="text"><p style="color:#e74c3c" @click="delAttendance(scope.row.checkId,scope.row.attendStatus,scope.row.checkStatus)">删除</p></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页功能 -->
        <div id="pages" class="paging-info">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,30,50]"
            :page-size="pagesize"
            layout="total , sizes , prev , pager , next"
            :total="attendances.length"
            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-button @click="addAttendanceInfo()">添加考勤信息</el-button>

      </div>
    </el-drawer>
    <!-- 查看考勤详情 -->
    <attendance-info ref="attendanceInfo" @getAllAttendanceInfo="getAllAttendanceInfo" />
    <!-- 查看考勤签到详情 -->
    <attendance-message-info ref="attendanceMessageInfo" /></div>
</template>
<script>
import { selectByCheckSemIdAndCheckListAndCheckListId, deleteessay } from '../../api/checkAttendance.js'
import { getSystemTime } from '../../api/public.js'
import { isOpenSendTime } from '../../utils/isOpenSendTime.js'
import attendanceInfo from './attendanceInfo.vue'
import AttendanceMessageInfo from './attendanceMessageInfo.vue'
export default {
  components: { attendanceInfo, AttendanceMessageInfo },
  data() {
    return {
      // 后台数据获取位置
      checkList: '', // 当前路由等级
      checkListId: '', // 当前路由等级下属ID
      semId: '', // 当前学期ID
      attendances: [], // 考勤信息
      sendInfo: [],
      routerInfo: {}, // 考勤管理
      // 页面数据存储位置
      loading: true,
      showAttenceIndex: false, // 外层抽屉
      currentPage: 1, // 默认显示页面为1
      pagesize: 10 // 每页的数据条数
    }
  },
  created() {
    // dialog信息初始化
    this.createDialogStatus()
    getSystemTime().then(res => { this.nowTime = res.obj })
  },
  methods: {
    // dialog信息初始化
    createDialogStatus() {
      this.showAttenceIndex = false
    },
    // 展示dialog
    showDialog(data) {
      const that = this
      this.showAttenceIndex = true
      // 存储路由信息
      that.checkList = data.checkList
      that.checkListId = data.checkListId
      that.routerInfo = data.routerInfo
      that.semId = sessionStorage.getItem('semId')
      that.sendInfo = data.sendInfo
      that.getAllAttendanceInfo()
    },
    // 获取全部表格数据
    getAllAttendanceInfo() {
      var that = this
      this.loading = true
      const nowTime = new Date(this.nowTime.replace(/-/g, '\/'))
      new Promise(function(resolve, reject) {
        selectByCheckSemIdAndCheckListAndCheckListId(that.semId, that.checkList, that.checkListId).then((res) => {
          // attendStatus 当前考勤状态 0 未开始 1 正在签到 2 已经结束 3 特殊问题
          for (const i in res.obj) {
            const startTime = new Date(res.obj[i].checkStartTime.replace(/-/g, '\/'))
            const stopTime = new Date(res.obj[i].checkStopTime.replace(/-/g, '\/'))
            if (startTime < nowTime && stopTime < nowTime) {
              res.obj[i].attendStatus = 2
            } else if (startTime > nowTime && stopTime > nowTime) {
              res.obj[i].attendStatus = 0
            } else if (startTime < nowTime && nowTime < stopTime) {
              res.obj[i].attendStatus = 1
            } else {
              res.obj[i].attendStatus = 3
            }
          }
          resolve(res.obj)
        })
      }).then(data => {
        that.attendances = data
        that.loading = false
      })
    },

    // 添加考勤详情
    addAttendanceInfo() {
      this.$refs.attendanceInfo.showDialog('', 0)
    },
    // 查看考勤详情
    showAttendanceInfo(attendance) {
      this.$refs.attendanceInfo.showDialog(attendance, 1)
    },
    // 删除考勤详情
    delAttendance(checkId, attendStatus, checkStatus) {
      const that = this
      isOpenSendTime().then((res) => {
        that.timeType = res
        if (that.timeType === 1) {
          if (checkStatus === 2 || attendStatus === 0) {
            that.$confirm('是否确认删除该信息', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteessay(checkId).then((res) => {
                that.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                that.getAllAttendanceInfo()
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          } else {
            that.$message({
              message: '当前状态禁止删除',
              type: 'warning'
            })
          }
        } else if (that.timeType === 2) {
          that.$message({
            message: '未到开放时间',
            type: 'warning'
          })
        } else if (that.timeType === 3) {
          that.$message({
            message: '已过开放时间',
            type: 'warning'
          })
        } else {
          that.$message({
            message: '系统繁忙请联系管理员',
            type: 'warning'
          })
        }
      })
    },
    // 查看考勤详细信息
    showAttendanceMessage(checkId, attendStatus) {
      const that = this
      isOpenSendTime().then((res) => {
        that.timeType = res
        if (that.timeType === 1) {
          that.$refs.attendanceMessageInfo.showDrawer(checkId, attendStatus, this.sendInfo, this.routerInfo)
        } else if (that.timeType === 2) {
          that.$message({
            message: '未到开放时间',
            type: 'warning'
          })
        } else if (that.timeType === 3) {
          that.$message({
            message: '已过开放时间',
            type: 'warning'
          })
        } else {
          that.$message({
            message: '系统繁忙请联系管理员',
            type: 'warning'
          })
        }
      })
    },
    // 分页
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    }
  }
}
</script>
<style lang="scss" scoped>
.attendance-all-infomation{
    width: 96%;
    margin:0 auto;
}
.attendance-title{
    margin-top: 3rem;
}
.attendance-all-info{
  margin-bottom: 2rem;
}
</style>
